<!--
 * @Author: C.
 * @Date: 2023-04-14 13:13:22
-->
<template>
  <div>
    <Dropdown>
      <template #overlay>
        <Menu @click="handleMenuClick">
          <MenuItem
            v-for="(item, index) in props.actions"
            :key="index"
            :disabled="item.disabled || !isNotDisabled"
          >
            <Icon :icon="item.icon" v-if="item.icon" />
            {{ item.label }}
          </MenuItem>
        </Menu>
      </template>
      <Button type="primary">批量操作 <Icon icon="ant-design:down-outlined" /></Button>
    </Dropdown>
  </div>
</template>

<script lang="ts" setup>
  import { PropType, computed } from 'vue';
  import { Dropdown, MenuItem, Button, Menu } from 'ant-design-vue';
  import Icon from '/@/components/Icon';
  import { isFunction, isArray } from '/@/utils/is';
  import { batchConfirm } from '/~/utils/system/index';

  const props = defineProps({
    actions: {
      type: Array as PropType<Recordable[]>,
      default: () => [],
    },
    batchData: {
      type: [Array, Function],
      default: () => [],
    },
  });
  const isNotDisabled = computed(() => {
    let data;
    if (isFunction(props.batchData)) {
      data = props.batchData();
    } else {
      data = props.batchData;
    }
    return data && isArray(data) && data.length !== 0;
  });
  function handleMenuClick(e) {
    let Ids = [];
    let action = props.actions[e.key];
    if (isFunction(props.batchData)) {
      Ids = props.batchData();
    } else {
      Ids = props.batchData as [];
    }
    batchConfirm(
      Ids,
      () => {
        action.onClick(Ids);
      },
      {
        iconType: 'warning',
        content: action.confirmText,
      },
    );
  }
</script>
<style lang="less" scoped></style>
